/*重置样式*/
@import "./reset.css";
/*引入tailwind*/
@import './tailwind.css';

.ellipsis-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    word-break: break-all;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.ellipsis-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    word-break: break-all;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* footer 高度 */
.footer-h {
    min-height: 10rem;
}

/* 最小宽度 */
.min-w-content {
    min-width: 320px !important;
}

/* 最小高度 去除 header 高度 */
.min-h {
    min-height: calc(100vh - 4rem);
}

/* 最小高度 去除 footer header 高度 */
.min-h-content {
    min-height: calc(100vh - 16rem);
}

/* 自动适应页面宽度显示元素 */
.auto-column {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

/* 自动适应页面宽度显示元素 */
.auto-min-column {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.25rem;
}

/* 由最内层盒子限制宽度 */
.inner-max-box {
    margin: 0 auto;
    width: 90%;
    min-width: 320px;
}

.inner-box {
    margin: 0 auto;
    width: 75%;
    min-width: 320px;
}

/* 由最内层盒子限制宽度 */
.inner-min-box {
    margin: 0 auto;
    width: 60%;
    min-width: 320px;
}

.text-3d-shadow {
    text-shadow: -1px 0 var(--text-light),
    -2px -1px var(--text-light),
    -3px -2px #fff,
    -4px -3px #fff,
    -5px -4px #fff,
    -6px -5px #fff,
    -7px -6px #fff,
    -8px -7px #fff,
    -9px -8px var(--text-light);
}


@media screen and (max-width: 1280px) {
    .inner-box, .inner-min-box {
        width: 80%;
    }
}

@media screen and (max-width: 1024px) {
    .inner-box, .inner-min-box {
        width: 90%;
    }
}


@media screen and (max-width: 640px) {
    .max-sm\:auto-min-column {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1rem;
    }

    .inner-max-box, .inner-box, .inner-min-box {
        width: 100%;
        min-width: 320px;
    }

    .text-3d-shadow {
        text-shadow: -1px 0 var(--text-light),
        -2px -1px var(--text-light),
        -3px -2px #fff,
        -4px -3px #fff,
        -5px -4px #fff,
        -6px -5px var(--text-light);
    }
}

/* 文本颜色流动效果 */
.flowing-text {
    background-image: linear-gradient(
            to right,
            rgb(255, 167, 69),
            rgb(254, 134, 159),
            rgb(239, 122, 200),
            rgb(160, 131, 237),
            rgb(67, 174, 255),
            rgb(160, 131, 237),
            rgb(239, 122, 200),
            rgb(254, 134, 159),
            rgb(255, 167, 69)
    );
    background-size: 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: flow 3s infinite linear;
}

@keyframes flow {
    0% {
        background-position: 200%;
    }
    100% {
        background-position: 0;
    }
}

/* 喇叭抖动效果 */
.animate-shock {
    animation: shock_frame 2s ease-in-out infinite;
}

@keyframes shock_frame {
    92%, 96%, 100% {
        transform: rotateZ(15deg);
    }
    0%, 90% {
        transform: rotateZ(0deg);
    }
    94%, 98% {
        transform: rotateZ(-15deg);
    }
}

/* 文字点击特效 */
.particle {
    color: red;
    position: fixed;
    font-size: 1.12rem;
    font-weight: bold;
    letter-spacing: 1px;
    z-index: 999999999;
    pointer-events: none;
    animation: hideParticle 1s ease-in 0.3s forwards;
}

@keyframes hideParticle {
    to {
        transform: translateY(-200px);
        opacity: 0;
    }
}